import React, {useState} from "react";
import {Link, useNavigate} from "react-router-dom";
import {Avatar, Dropdown, Menu, Tooltip} from "antd";
import IconFont from "../IconFont";
import {MenuUnfoldOutlined,MenuFoldOutlined,DownOutlined} from '@ant-design/icons'
import Events from "../Events";
import styles from "./index.module.css";
import img from '../../assets/img/img.jpg'
import menuList from "./menuList";

const Header = (props) => {
	const [state,setState] = useState({
		username: localStorage.getItem("ms_username") || "Admin",
		fullscreen: false,
		collapsed: false
	});

	const navigate = useNavigate();

	// 折叠展开侧边栏
	function onCollapse() {
		Events.emit("collapse");
		const collapsed = state.collapsed;
		setState({...state,collapsed: !collapsed});
	}
	// 设置全屏
	function setFullScreen() {
		const fullscreen = state.fullscreen;
		const element = document.documentElement;
		if (fullscreen) {
			if (document.exitFullscreen) {
				document.exitFullscreen();
			} else if (document.webkitCancelFullScreen) {
				document.webkitCancelFullScreen();
			} else if (document.mozCancelFullScreen) {
				document.mozCancelFullScreen();
			} else if (document.msExitFullscreen) {
				document.msExitFullscreen();
			}
		} else {
			if (element.requestFullscreen) {
				element.requestFullscreen();
			} else if (element.webkitRequestFullScreen) {
				element.webkitRequestFullScreen();
			} else if (element.mozRequestFullScreen) {
				element.mozRequestFullScreen();
			} else if (element.msRequestFullscreen) {
				// IE11
				element.msRequestFullscreen();
			}
		}
		setState({...state,fullscreen: !fullscreen});
	}
	// 用户名下拉菜单操作
	function handleDropdown({ key }) {
		switch (key) {
			case "0":
				window.open("https://lin-xin.gitee.io/about/", "_blank");
				break;
			case "1":
				window.open("https://github.com/lin-xin/react-manage-system", "_blank");
				break;
			case "2":
				localStorage.removeItem("ms_username");
				navigate("/login");
				break;
			default:
				return;
		}
	}

	return (
		<div className={styles.header}>
			<div className={styles.collapseBtn} onClick={onCollapse}>
				{state.collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
			</div>
			<div className={styles.headerRight}>
				<div className={styles.headerUserCon}>
					<Tooltip title={state.fullscreen ? `取消全屏` : `全屏`} placement="bottom">
						<div className={styles.btnFullscreen} onClick={setFullScreen}>
							<IconFont type="anticon-lx-full" />
						</div>
					</Tooltip>
					<Tooltip title={"消息中心"} placement="bottom">
						<Link to="tabs">
							<div className={styles.btnBell}>
								<IconFont type="anticon-lx-notice" />
								<span className={styles.btnBellBadge} />
							</div>
						</Link>
					</Tooltip>
					{/* 用户头像 */}
					<Avatar className={styles.userAvatar} src={img} />
					{/* 用户名下拉菜单 */}
					<Dropdown
						className={styles.userName}
						trigger={["click"]}
						overlay={<Menu onClick={handleDropdown} items={menuList}/>}>
							<span className={styles.elDropdownLink}>
								{state.username}<DownOutlined />
							</span>
					</Dropdown>
				</div>
			</div>
		</div>
	);
}

export default React.memo(Header);
